<template>
	<view class="container">
		<uni-nav-bar fixed statusBar backgroundColor="#ff9000" :border="false" title="我的" color="#FFFFFF;">
		</uni-nav-bar>
		<t-title>
			<block slot="body">
				<t-user-card></t-user-card>
			</block>
		</t-title>
		<view class="card-box">
			<view class="card-box-head u-flex u-col-center" @tap.stop="jump('/pages/user/wallet/wallet')">
				我的钱包<uni-icons type="arrowright"></uni-icons>
			</view>
			<view class="card-box-body">
				<view class="cb-wallet-item">
					<text class="cb-wallet-item-num">{{userInfo.wallet}}</text>
					<text class="cb-wallet-item-tip">余额</text>
				</view>
				<view class="cb-wallet-item">
					<text class="cb-wallet-item-num">{{userInfo.freeze_wallet}}</text>
					<text class="cb-wallet-item-tip">冻结</text>
				</view>
				<view v-if="userInfo && userInfo.is_agent == '1'" class="cb-wallet-item">
					<text class="cb-wallet-item-num">{{userInfo.bond_money}}</text>
					<text class="cb-wallet-item-tip">保证金</text>
				</view>
			</view>
			<view class=""></view>
			<view class="recharge" @tap.stop="jump('/pages/user/wallet/recharge')">充值</view>
		</view>
		<view class="card-box">
			<block v-if="shopList.length > 0">
				<view @tap.stop="goShopList" class="card-box-head u-flex u-col-center">
					{{selectId && selectId > 0 ? '店铺列表' : '我的店铺'}}({{shopList.length}})
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<view class="card-box-body card-box-body-cloumn">
					<uni-list :border="false" style="width: 100%;">
						<block v-for="(shop,index) in shopList" :key="shop.id">
							<uni-list-item @tap.stop="goShopDetail(shop.id)" :title="shop.name"
								:thumb="$IMG_URL + shop.logo" thumbSize="lg"
								:rightText="shop.shop_type == 1 ? '美团': (shop.shop_type == 2 ? '饿了么' : '京东')" showArrow />
						</block>
					</uni-list>
				</view>
			</block>
			<block v-else>
				<view class="card-box-head u-flex u-col-center">{{selectId && selectId > 0 ? '店铺列表' : '我的店铺'}}</view>
				<view class="card-box-body card-box-body-cloumn">
					<view class="no-shop-tip">暂未发现您的店铺，请添加</view>
					<button class="add-shop" @tap.stop="addShop">添加店铺</button>
				</view>
			</block>

		</view>
		<view class="card-box">
			<view class="card-box-head u-flex u-col-center">
				我的服务
			</view>
			<view class="card-box-body card-box-body-cloumn">
				<view v-if="userInfo && userInfo.is_agent == '1'" class="list-conten" @tap.stop="jump('/pages/shop/admin/user-list')">
					<view class="list-con-item list-con-left">
						<uni-icons style="margin-right: 10rpx;" type="download" color="#ff9000" size="24"></uni-icons>
						管理商家
					</view>
					<view class="list-con-item list-con-right">
						查看我的下级商家<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				<!-- <view class="list-conten" @tap.stop="jump('/pages/user/download-bill')">
					<view class="list-con-item list-con-left">
						<uni-icons style="margin-right: 10rpx;" type="download" color="#ff9000" size="24"></uni-icons>
						我的账单
					</view>
					<view class="list-con-item list-con-right">
						可导出店铺账单<uni-icons type="arrowright"></uni-icons>
					</view>
				</view> -->
				<view class="list-conten" @tap.stop="jump('/pages/user/share')">
					<view class="list-con-item list-con-left">
						<uni-icons style="margin-right: 10rpx;" type="personadd" color="#ff9000" size="24"></uni-icons>
						邀请商家
					</view>
					<view class="list-con-item list-con-right">
						邀请商家<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				<!-- <view class="list-conten" @tap.stop="goMeiTuan()">
					<view class="list-con-item list-con-left">
						<uni-icons style="margin-right: 10rpx;" type="personadd" color="#ff9000" size="24"></uni-icons>
						去美团
					</view>
					<view class="list-con-item list-con-right">
						去美团<uni-icons type="arrowright"></uni-icons>
					</view>
				</view> -->
				<view class="list-conten">
					<button open-type="contact" class="btn-kefu list-conten">
						<view class="list-con-item list-con-left">
							<uni-icons style="margin-right: 10rpx;" type="chatbubble" color="#ff9000" size="24">
							</uni-icons>
							联系客服
						</view>
						<view class="list-con-item list-con-right">
							答疑解惑<uni-icons type="arrowright"></uni-icons>
						</view>
					</button>
				</view>
				<!-- <view class="list-conten" @tap.stop="jump('/pages/index/richtext?id=20')"> -->
				<view class="list-conten" @tap.stop="jump('/pages/user/about-us')">
					<view class="list-con-item list-con-left">
						<uni-icons style="margin-right: 10rpx;" type="staff" color="#ff9000" size="24"></uni-icons>
						关于我们
					</view>
					<view class="list-con-item list-con-right">
						了解我们<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view v-show="showLogin" class="trnall-mask" @tap.stop="loign"></view>
		<block v-if="selectId && selectId > 0">
			<t-menu></t-menu>
		</block>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				requestIng: false,
				city: '暂无店铺',
				showLogin: false
			}
		},
		computed: {
			...mapGetters(['shopList', 'currentShopIndex', 'userInfo'])
		},
		onLoad() {
			// this.$store.dispatch('getShopList');
			// this.$store.dispatch('getShopCategory');
		},
		onShow() {
			this.init();
			// this.$store.dispatch('getUserInfo');
			if (!uni.getStorageSync('authUserInfo')) this.showLogin = true;
		},
		methods: {
			init() {
				this.$store.dispatch('getShopList');
				this.$store.dispatch('getShopCategory');
				this.$store.dispatch('getUserInfo');
			},
			addShop() {
				this.$util.jump('/pages/shop/shop')
			},
			goShopList() {
				this.$util.jump('/pages/shop/shop-list');
			},
			goShopDetail(id) {
				this.$util.jump('/pages/shop/shop-detail?id=' + id);
			},
			jump(url) {
				this.$util.jump(url);
			},
			loign() {
				console.log('login');
				let that = this;
				if (that.requestIng) return;
				that.requestIng = true;
				this.$store.dispatch('getUserProfile', {
					success: (res) => {
						that.requestIng = false;
						that.showLogin = false;
					}
				});
			},
			goMeiTuan() {
				uni.navigateToMiniProgram({
					appId: config.USER_APPID,
					path: 'packages/restaurant/restaurant/restaurant?cat_id=0&poi_id=14090353',
					success(res) {
						// 打开成功
						console.log('s')
					},
					fail(e) {
						console.log(e)
					}
				})
			}

		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.init();
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.container {
		.card-box {
			width: 90%;
			min-height: 100rpx;
			margin: 30rpx 5%;
			padding: 30rpx 0;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 810;


			&-head {
				color: #888;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				width: 90%;
				margin-left: 5%;
				height: 50rpx;
				align-items: center;
			}

			&-body {
				width: 90%;
				margin: 30rpx 5%;
				display: flex;

				.cb-wallet-item {
					display: flex;
					flex-direction: column;
					flex: 1;

					.cb-wallet-item-num {
						font-size: 40rpx;
						font-weight: 700;
					}

					.cb-wallet-item-tip {
						font-size: 28rpx;
					}
				}
			}

			&-body-cloumn {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				margin-top: 44rpx;

				.no-shop-tip {
					color: #888;
					margin-bottom: 20rpx;
				}

				.add-shop {
					color: #ff9000;
					background: #fff;
					border: 1px solid #ff9000;
					border-radius: 37px;
					height: 74rpx;
					line-height: 74rpx;
					width: 180rpx;
					font-size: 28rpx;
				}

				.list-conten {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					align-items: center;
					font-size: 28rpx;
					color: #888;

					.list-con-item {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 600;
						color: #222;
					}

					.list-con-left {}

					.list-con-right {
						color: #888;
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}

			.recharge {
				height: 60rpx;
				line-height: 60rpx;

				font-weight: 600;
				font-size: 34rpx;
				color: #ff9000;
				text-align: center;

			}
		}
	}

	.uni-list-item image {
		border-radius: 5px;
	}

	.container::-webkit-scrollbar {
		display: none;
	}

	.container::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.container::-ms-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.container::-moz-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.btn-kefu {
		font-size: 30rpx;
		margin: 0;
		padding: 0;
		color: rgba(0, 0, 0, 0.3);
		background: rgba(0, 0, 0, 0);
	}

	.btn-kefu::after {
		border: none;
	}

	.trnall-mask {
		background: rgba(0, 0, 0, 0);
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
